<template>
  <div v-if="demand">
    <n-card>
      <template #header>
        <n-space align="center">
          <n-button text @click="router.back()">
            <n-icon size="20"><ArrowBackOutline /></n-icon>
          </n-button>
          <span>{{ demand.title }}</span>
          <n-tag v-if="demand.status === 'PENDING'" type="warning">待接单</n-tag>
          <n-tag v-else-if="demand.status === 'ASSIGNED'" type="info">已分配</n-tag>
          <n-tag v-else-if="demand.status === 'IN_PROGRESS'" type="primary">服务中</n-tag>
          <n-tag v-else-if="demand.status === 'COMPLETED'" type="success">已完成</n-tag>
        </n-space>
      </template>

      <n-descriptions bordered :column="2">
        <n-descriptions-item label="需求方">
          {{ demand.demanderName }}
        </n-descriptions-item>
        <n-descriptions-item label="联系电话">
          {{ demand.contactPhone }}
        </n-descriptions-item>
        <n-descriptions-item label="服务地址">
          {{ demand.address }}
        </n-descriptions-item>
        <n-descriptions-item label="期望时间">
          {{ formatDate(demand.expectedTime) }}
        </n-descriptions-item>
        <n-descriptions-item label="所需技能">
          <n-tag>{{ demand.requiredSkills }}</n-tag>
        </n-descriptions-item>
        <n-descriptions-item label="积分奖励">
          <n-text type="success">{{ demand.pointsReward }} 积分</n-text>
        </n-descriptions-item>
        <n-descriptions-item label="需求描述" :span="2">
          {{ demand.description }}
        </n-descriptions-item>
      </n-descriptions>

      <template #action>
        <n-space>
          <n-button
            v-if="demand.status === 'PENDING' && !hasApplied"
            type="primary"
            @click="handleApply"
          >
            我要接单
          </n-button>
        </n-space>
      </template>
    </n-card>
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { useUserStore } from '@/stores/user'
import { getDemandDetail, applyDemand, getUserApplications } from '@/api/demand'
import { ArrowBackOutline } from '@vicons/ionicons5'

const route = useRoute()
const router = useRouter()
const userStore = useUserStore()

const demand = ref(null)
const application = ref(null)

const hasApplied = computed(() => !!application.value)

const formatDate = (dateStr) => {
  if (!dateStr) return ''
  return new Date(dateStr).toLocaleString('zh-CN')
}

const loadDemand = async () => {
  try {
    const res = await getDemandDetail(route.params.id)
    demand.value = res.data
    
    // 检查是否已申请
    const appRes = await getUserApplications(userStore.userId)
    application.value = appRes.data?.find(a => a.demandId === Number(route.params.id))
  } catch (error) {
    console.error('加载需求详情失败:', error)
  }
}

const handleApply = async () => {
  try {
    await applyDemand(route.params.id, {
      userId: userStore.userId,
      reason: ''
    })
    window.$message?.success('申请成功')
    loadDemand()
  } catch (error) {
    console.error('申请失败:', error)
  }
}

onMounted(() => {
  loadDemand()
})
</script>

